<template>
	<view class="out-box">
		<view class="hader">
				<view class="user_vip">
					<view class="vip_title">
						<i class="vip_title_left"></i>
						<view class="vip_title_right">VIP会员中心</view>
					</view>
					<view class="vip_classification">
						<view class="classification_item">
							<i class="classification_item_i">
								<image class="classification_item_img" src="../../static/images/店铺.png"></image>
							</i>
							<view class="classification_item_text">店铺转让</view>
						</view>
						<view class="classification_item">
							<i class="classification_item_i">
								<image class="classification_item_img" src="../../static/images/发布租房.png"></image>
							</i>
							<view class="classification_item_text">求租店铺</view>
						</view>
						<view class="classification_item">
							<i class="classification_item_i">
								<image class="classification_item_img" src="../../static/images/手机端.png"></image>
							</i>
							<view class="classification_item_text">交换电话</view>
						</view>
						<view class="classification_item">
							<i class="classification_item_i">
								<image class="classification_item_img" src="../../static/images/云下载.png"></image>
							</i>
							<view class="classification_item_text">资源查看</view>
						</view>
					</view>
				</view>
		</view>
		<!-- 下方的主要内容 -->
		<view class="main">
			<view class="main_title">
				<view class="main_title_block"></view>
				<view class="main_tiele_text">会员账号</view>
				<view class="samll_title">(联系电话将作为会员账号使用请前往小程序绑定)</view>
			</view>
			<view class="opind_num">{{ user.phone }}</view>
			<view class="main_title">
				<view class="main_title_block"></view>
				<view class="main_tiele_text">套餐选择</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
			<!-- 中间的单选框 -->
				<view class="checkbox">
				<!-- <uni-data-checkbox  class="checkbox_item" v-model="value" :localdata="product_lists.value" @change="change"></uni-data-checkbox> -->
					<view v-for="(item,index) in product_lists" :key="index">
						<view :class="item.id == product_value.default.id ? 'checkbox_item checkbox_selected' : 'checkbox_item'" @tap="click_item(item)">
							<view class="title_top">{{ item.product_name }}</view>
							<view class="title_buttom"><span class="span11">{{item.now_money / 100}}</span>元</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="main_title">
				<view class="main_title_block"></view>
				<view class="main_tiele_text">套餐特权</view>
			</view>
			<!-- 展示区 -->
			<view class="main_show">
				<!-- <view class="show_top">{{product_value.default.product_name }}</view> -->
				<view v-for="item,index in product_value.default.vip_text" :key="index">
					<view class="show_item">
						<view class="item_left">{{ item.key_name }}</view>
						<view class="item_right">{{ item.key_value}}</view>
					</view>
				</view>
			</view>
			<view class="main_title">
				<view class="main_title_block"></view>
				<view class="main_tiele_text">支付方式</view>
			</view>
			<view class="pay_radio">
				<radio-group @change="radioChange" style="height: 100rpx;">
					<label v-for="(item, index) in items" :key="item.value">
						<view class="radio_main">
							<view class="radio_top">
								<radio :value="item.value" color="rgba(255, 87, 51, 1)" :checked="item.value == current" />
							</view>
							<image class="radio_img" :src=item.img></image>
							<view class="radio_text">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>

		<!-- 最下方悬浮支付 -->
		<view class="buttom">
			<!-- <view class="buttom_top">
				<uni-data-checkbox  @change="click_confirm" multiple v-model="range_value" :localdata="range"></uni-data-checkbox>
				<view class="buttom_top_text">勾选图标表示阅读并同意<span class="span1">《服务协议》</span></view>
			</view> -->
			<view class="buttom_buttom" @tap="pay_throttle()">开通会员</view>
		</view>
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount} from 'vue'
import {onGotApiData,addClick} from '../../util/api.js'

	const props = defineProps({
				shop_id: String,
				shop_type:String
			});
	const propshop_id = props.shop_id
	const propshop_type = props.shop_type

	// 用户的信息
	let user = reactive({
		openid:'',
		shop_type:0,
		link:'',
		channel_no:'',
		phone:'',
		shop_id:'',
	})

	// 在组件渲染之前执行
	onBeforeMount(() => {
		if(propshop_id != null && propshop_id != '' && propshop_type != null && propshop_type != ''){
			user.shop_type = propshop_type
			user.shop_id = propshop_id
		}
		console.log('组件准备渲染');
		user.channel_no = uni.getStorageSync('channel_no') || '';
		user.link = uni.getStorageSync('link');
		user.phone = uni.getStorageSync('phone');
		// 调用请求产品信息的接口
		product();
		// user.openid = uni.getStorageSync('open_id') || null;
		// 从首页跳转到这个页面之后，没有登录，跳转到登录页面
		// if(!user.openid){
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	});
		// }
	})

	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕');
	});
	// h5支付选择相关的内容
	let items = reactive([{
		value: 'ZFB_H5',
		img:'https://img.js.design/assets/img/64cb54d4c52e67de73498b6d.png#17091270c3057451fb6cde608a1a4833',
		name: '支付宝'
	},{
		value: 'WX_H5',
		img:'https://img.js.design/assets/img/64cb54ef71b2269b2c7df350.png#514156c9ec74aa8c2342c37fd74e643a',
		name: '微信'

	}])
	const current = ref('ZFB_H5')
	const radioChange = (evt) => {
		console.log("aaaa",evt.detail.value)
		current.value = evt.detail.value
		addClick('H5会员页',current.value)
	}

	// 同意勾选框的选中的值和，全部值列表
	const range_value = ref(0)
	let range = ref([{"value": 1}])
	const click_confirm = () =>{
		console.log("我是选中的值",range_value.value[0])
	}

	// 产品的列表
	let product_lists = ref([])
	// 选中的产品
	let product_value  = reactive({
		default:{}
	})
	// 请求产品会员的接口
	const product = () =>{
		let params = reactive({})
		params.channelNo = user.channel_no,
		params.shop_type = user.shop_type
		console.log("params",params)
		onGotApiData('/api/app/product/list','GET',params,product_result)
	}

	// 会员页面产品请求的结果
	const product_result = (result) => {
		// 遍历一下，会有json字符串
		result.forEach((value,index,Array)=>{
			if(value.vip_text){
				Array[index].vip_text = JSON.parse(value.vip_text)
				}
			})
		product_lists.value = result
		product_value.default = product_lists.value[0]
		console.log('我是产品结果',result)
		console.log('我选中的产品是', product_value.default)
	}
	// 点击选择框事件
	const click_item = (item) =>{
		addClick("H5会员页",item.product_name)
		console.log('e:',item);
		product_value.default = item
	}

		// 支付加一个节流
	let lastClickTime =ref(0)
	const pay_throttle = () => {
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - lastClickTime.value > 1200) {
		// 执行支付
			pay()
			lastClickTime.value = currentTime
		} else {
			lastClickTime.value = currentTime
		}
	}
	// 点击下方支付
	const pay = () =>{
		addClick("H5会员页","立即开通会员按钮")

		// if(!range_value.value[0]){
		// 	console.log("我没有点击同意")
		// 	uni.showToast({
		// 		title: '请勾选服务协议',
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// 	return
		// }

		let params = reactive({})
		params.channel_no = user.channel_no,
		params.product_id = product_value.default.id,
		params.pay_type = current.value,
		params.link = user.link,
		params.phone = user.phone,
		// params.phone = '13562354412',
		params.shop_type = user.shop_type,
		params.shop_id = user.shop_id
		console.log("params",params)
		onGotApiData('/api/app/order/create','POST',params,pay_result)
	}

	// 会员页面产品请求的结果
	const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
	// 唤起支付
	const requestPayment = (result) => {
		// 清除弹框
		setTimeout(function(){
			uni.hideLoading();
		})
		console.log("请球支付结果",result)
		window.location.href = result.payUrl


		// 唤起微信支付
		// wx.requestPayment({
		// 	timeStamp: '' + result.timestamp, // 时间戳，自行生成
		// 	nonceStr: '' + result.noncestr, // 随机字符串，自行生成
		// 	package: 'prepay_id=' + result.prepayid, // 统一下单接口返回的prepay_id参数值
		// 	signType: 'MD5', // 签名算法，固定值为MD5
		// 	paySign: '' + result.sign, // 签名，自行生成
		// 	success: function (res) {
		// 	// 支付成功回调
		// 	console.log('支付成功', res);
		// 	uni.showToast({
		// 			title: '支付成功',
		// 			icon: 'none',
		// 			duration: 2000
		// 		});
		// 	},
		// 	fail: function (res) {
		// 	// 支付失败回调
		// 	console.log('支付失败', res);
		// 	uni.showToast({
		// 			title: '支付失败',
		// 			icon: 'none',
		// 			duration: 2000
		// 		});
		// 	}
		// });
	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgb(236, 235, 235);
		width: 750rpx auto;
		.hader{
			width: 100%;
			// margin-left: 1%;
			height: 260rpx;
			// border: 1px solid black;	
			// text-align: center;
			// padding-top: 15rpx;	
			font-family: Arial, Helvetica, sans-serif;
			font-weight: 600;
			color: #F5F5F5;
			border: 1px solid rgb(49, 51, 68);
			background-color: rgb(49, 51, 68);
			// background: linear-gradient(to bottom,rgb(255,115,66),rgb(255,193,172));	
			.user_vip{
				width: 700rpx;
				height: 270rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				// margin: 50rpx 0 0 10rpx;
				background: linear-gradient(to bottom,rgb(255,213,95),rgb(255,222,162));
				border-radius: 10rpx;
				border: 1px solid rgb(250, 213, 118);
				.vip_title{
					width: 500rpx ;
					height: 80rpx;
					margin: 20rpx 0 0 20rpx;
					// border: 1px solid black;
					display: flex;
					.vip_title_left{
						width: 65rpx;
						height: 65rpx;
						background-image: url(../../static/images/会员.png);
						background-size: 100% 100%;
					}
					.vip_title_right{
						line-height: 70rpx;
						margin-left: 12rpx;
						font-weight: 600;
						color: rgb(141, 78, 27);
					}
				}
				.vip_classification{
					width: 700rpx;
					height: 140rpx;
					margin-top: 14rpx;
					// border: 1px solid black;
					display: flex;
					justify-content: space-around;
					.classification_item{
						width: 130rpx;
						height: 130rpx;
						// background-color: #F5F5F5;
						// color: black;

						.classification_item_i{
							display: inline-block;
							width: 80rpx;
							height: 80rpx;
							margin: 14rpx 0 0 26rpx;
							// margin-top: 10rpx;
							background-color: rgb(207, 166, 112);
							border-radius: 50%;
							.classification_item_img{
								width: 50rpx;
								height: 50rpx;
								margin: 15rpx 15rpx;
							}
						}
						.classification_item_text{
							width: 130rpx;
							height: 30rpx;
							text-align: center;
							color:  rgb(120, 78, 27);
							font-size: 24rpx;
							// border: 1px solid black;
							// margin-top: 10rpx;
						}
					}
				}
			}
			
		}
		// 下方的vip部分
		.main{
			width: 100%;
			margin-top: 50rpx;
			font-family: '思源字体';

			.main_title{
				width: 700rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				border: 1px solid rgb(236, 235, 235);
				display: flex;
			
				.main_title_block{
					width: 8rpx;
					height: 30rpx;
					margin: 10rpx 0 0 0;
					background-color: orangered;
				}
				.main_tiele_text{
					width: 140rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 34rpx;
					margin-left: 10rpx;
					font-weight: 600;
					color: rgba(112, 61, 9, 1);
				}
				.samll_title{
					// width: 490rpx;
					height: 50rpx;
					line-height: 55rpx;
					font-size: 24rpx;
					margin-left: 2rpx;
					font-weight: 400;
					color: rgba(112, 61, 9, 1);
				}
			}
			.opind_num{
				width: 700rpx;
				height: 70rpx;
				margin: 0 auto;
				padding-left: 20rpx;
				font-size: 36rpx;
				font-weight: 400;
				line-height: 70rpx;
				color: rgba(0, 0, 0, 1);
				background-color: rgba(255, 255, 255, 1);
				margin-top: 10rpx;
				border-radius: 10rpx;
				// border: 1px solid rgb(236, 235, 235);
			}

			// 下方是选择框的样式
			.checkbox{
				width: 730rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				display: flex;
				.checkbox_item{
					width: 290rpx;
					height: 150rpx;
					margin:0 10rpx 0 0;
					// background-color: rgb(250, 250, 250);
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					box-shadow: 0 0 20rpx #999;
					// background: linear-gradient(90deg, rgba(242, 179, 146, 1) 0%, rgba(255, 234, 210, 0) 100%);
					background-color: #F5F5F5;
					border: 2rpx solid #999;
					.title_top{
						width: 290rpx;
						height: 80rpx;
						// margin-left: 20rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 32rpx;
						color: rgba(112, 61, 9, 1);
						font-weight: 400;
					}
					.title_buttom{
						width: 290rpx;
						height: 70rpx;
						// margin-left: 20rpx;
						text-align: center;
						margin-right: 20rpx;
						// line-height: 70rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(112, 61, 9, 1);	
						.span11{
							font-size:40rpx;
						}
					}
				}
				.checkbox_selected{
					background-color:rgb(254, 226, 192);
					border: 2rpx solid rgba(255, 87, 51, 1);
				}
			}
			.main_show{
				width: 730rpx;
				margin: 0 auto;
				margin-top: 8rpx;
				background-color: rgba(255, 255, 255, 1);
				border-radius:12rpx;
				.show_top{
					width: 730rpx;
					height: 30rpx;
					padding-top: 10rpx;
					text-align: center;
					color: rgba(42, 130, 228, 1);
					font-size: 24rpx;
				}
				.show_item{
					width: 690rpx;
					height: 70rpx;
					margin-top: 10rpx;
					padding-left:20rpx;
					padding-right:20rpx;
					display: flex;
					justify-content: space-between;
					.item_left{
						line-height: 70rpx;
						color: rgba(56, 56, 56, 1);
						font-size: 30rpx;

					}
					.item_right{
						line-height: 70rpx;
						color: rgba(255, 87, 51, 1);
						font-size: 30rpx;
					}
				}
			}

			// 支付选择样式
			.pay_radio{
				width: 750rpx;
				height: 140rpx;
				// border: 1px solid black;
				background-color:rgba(255, 255, 255, 1);
				border-radius: 10rpx;
				margin: 0 auto;
				margin: 20rpx 0 200rpx 0rpx;
				.radio_main{
					width: 100%;
					height: 50rpx;
					padding: 10rpx 0 10rpx 20rpx;
					display: flex;
					.radio_top{
						width: 48rpx;
						height: 48rpx;
					}
					.radio_img{
						width: 48rpx;
						height: 48rpx;
						margin: 2rpx 0 0 30rpx;
					}
					.radio_text{
						width: 148rpx;
						height: 48rpx;
						margin: 2rpx 0 0 20rpx;
						color: rgba(56, 56, 56, 1);
						font-size: 32rpx;
						line-height: 48rpx;

					}
				}
			}

		}
		// 最下方的悬浮
		.buttom{
			width: 100%;
			height: 100rpx;
			// 参照浏览器视口进行定位
			position: fixed;
			// top: calc(100vh - 160rpx);
			bottom: 0;
			// border: 1px solid black;
			background-color: #F5F5F5;
			.buttom_top{
				width: 500rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				// background-color: pink;
				display: flex;
				.buttom_top_text{
					font-size: 24rpx;
					line-height: 50rpx;
					.span1{
						color: rgb(255, 114, 64);
					}
				}
			}
			.buttom_buttom{
				width: 600rpx;
				height: 80rpx;
				margin:  0 auto;
				margin-top: 10rpx;
				border-radius: 0rpx;
				background-color: rgb(255, 114, 64);
				line-height: 80rpx;
				text-align: center;
				color: #F5F5F5;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
		// 勾选选中样式的穿透
		:deep(.uni-data-checklist){
			width: 40rpx;
			flex: 0.6;
		}
		:deep(.uni-data-checklist .checklist-group .checklist-box .checkbox__inner) {
			border-radius: 50%;
			border-color: #000 !important;
		}
		:deep(.uni-data-checklist .checklist-group .checklist-box.is-checked .checkbox__inner) {
			background-color: rgb(255, 114, 64) !important;
			border-color: rgb(255, 114, 64) !important;
		}
	}
</style>
